<script setup>
import {reactive, ref, getCurrentInstance} from 'vue';
import GlobalParas from "@/GlobalParas.js";
import {PlusOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
import globalParas from "@/GlobalParas.js";


let props = defineProps({
  files: {
    type: Array,
    default: []
  },
  allowUploadFiles: {
    type: Number,
    default: 6
  }
})

let emit = defineEmits(["update:files"])



let fileList = ref(props.files);
// fileList.value=[]


const uploadPath = globalParas.postUrl + "/upload";
// console.log(uploadPath);

const changeHandle = info => {
  // if(info.file.status==="removed"){
  //   fileList.value = fileList.value.filter(item => {
  //     fileList.value.pop(1)
  //   })
  // }
  if (info.file.status !== 'uploading') {
    // console.log(info.file, info.fileList);
  }
  if (info.file.status === 'done') {
    // console.log(fileList.value)
    message.success(`${info.file.name} 上传成功.`);
    fileList.value.forEach(item => {
      // console.log(item)
      item.serverFileName = item.response + "_" + item.name;
      // console.log(item.serverFileName)
      item.url = globalParas.downLoadPath + item.serverFileName;
    })

    // console.log(fileList)
    emit("update:files", fileList.value)

  } else if (info.file.status === 'error') {
    message.error(`${info.file.name} 上传失败.`);
  }
}
</script>

<template>
  <a-upload
      v-model:file-list="fileList"
      :action="uploadPath"
      list-type="picture-card"
      @change="changeHandle"
  >
    <div v-if="fileList.length<allowUploadFiles">
      <plus-outlined/>
      <div style="margin-top: 8px">点此上传附件<br><span
          style="color:#ed4646">(附件不超过{{ allowUploadFiles }}个)</span></div>
    </div>
  </a-upload>
</template>

<style scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>